{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}


<p style="float: bottom" class="animate__animated animate__bounceInLeft">欢迎参加本次游戏</p>

    <!-- 欢迎参加本次游戏 -->
    <div style="font-size:20px;">
        <p class="animate__animated animate__bounceInLeft">
                    &nbsp&nbsp&nbsp&nbsp&nbsp &nbsp请认真观察以下10个投资场景，每个项目都有两种投资方案。
            <strong>请您在两种方案中选出您认为最好的方案。</strong>

            <br>

        </p>
        <p class="animate__animated animate__bounceInLeft">  &nbsp &nbsp &nbsp &nbsp请根据您的真实想法，做出您认为正确的选择：(在做完本次测试后，<span style="color: red;">请点击Next</span>按钮)  </p>

    </div>

{% endblock %}
{% block content %}


    <link rel="stylesheet" href="{% static 'css/element.css' %}">
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="{% static 'js/element.js' %}"></script>


   <div id="root">
        <test></test>
    </div>
    <template id="table">
        <div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="决策情境"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="A"
                        width="400">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="B"
                        width='220'>
                </el-table-column>

                <el-table-column
                prop="address"
                label="您的选择是">
                    <template slot-scope="scope">
                      {% formfield player.q1 %}
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </template>
    <script>
        const table = Vue.extend(
            {
                template: "#table",
                data() {
                    return {
                        tableData: [{
                            date: '1',
                            name: '{{ same_question }}',
                            address: '{{ q_list.0 }}'
                        },{
                            date: '2',
                            name: '{{ same_question }}',
                            address: '{{ q_list.1 }}'
                        },{
                            date: '3',
                            name: '{{ same_question }}',
                            address: '{{ q_list.2 }}'
                        },{
                            date: '4',
                            name: '{{ same_question }}',
                            address: '{{ q_list.3 }}'
                        },{
                            date: '5',
                            name: '{{ same_question }}',
                            address: '{{ q_list.4 }}'
                        },{
                            date: '6',
                            name: '{{ same_question }}',
                            address: '{{ q_list.5 }}'
                        },{
                            date: '7',
                            name: '{{ same_question }}',
                            address: '{{ q_list.6 }}'
                        },{
                            date: '8',
                            name: '{{ same_question }}',
                            address: '{{ q_list.7 }}'
                        },{
                            date: '9',
                            name: '{{ same_question }}',
                            address: '{{ q_list.8 }}'
                        },{
                            date: '10',
                            name: '{{ same_question }}',
                            address: '{{ q_list.9 }}'
                        }]
                    }
                }
            }
        );

        const app = new Vue({
            el: "#root",
            components: {
                'test': table
            }
        })

    </script>

<script>
    var button = document.getElementsByClassName("el-table__row")
    for(let i=0;i<button.length;i++){
        let inputs=button[i].getElementsByTagName("input")
        let labels = button[i].getElementsByTagName('label')

        for(let j=0;j<inputs.length;j++){
            let num=i+1
        //  修改Input标签中的属性   修改label标签的属性
            inputs[j].setAttribute("name","q"+num)
            if(j%2==0){
                inputs[j].setAttribute('id',`id_q${num}_0`)
                labels[j].setAttribute('for',`id_q${num}_0`)

            }else{
                inputs[j].setAttribute('id',`id_q${num}_1`)
                labels[j].setAttribute('for',`id_q${num}_1`)

            }

        }
    }
</script>


{#    {% formfield player.q3 %}#}
{#    {% formfield player.q4 %}#}
{#    {% formfield player.q5 %}#}
{#    {% formfield player.q6 %}#}
{#    {% formfield player.q7 %}#}
{#    {% formfield player.q8 %}#}
{#    {% formfield player.q9 %}#}
{#    {% formfield player.q10 %}#}
 <h4><br>请<span style="color: red;">点击Next</span>按钮<br> </h4>

<br/>
<div style="float:right">
    {% next_button %}

</div>


{% endblock %}
